<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片库管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/theme-chalk.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理
            <small>相册管理</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>相册库管理</el-breadcrumb-item>
            <el-breadcrumb-item>相册管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container" style="width: 1100px;margin: 50px auto">
        <div class="box">
            <div class="filter-container">
                <!--查询表单-->
                <el-form :inline="true">
                    <el-button class="dalfBut" onclick="location.href='album.html'">返回相册库</el-button>
                    <el-button type="primary" class="butT" @click="formVisible=true;pojo={}">新增</el-button>
                </el-form>
            </div>
            <el-row>
                <el-col :span="4" v-for="(image, index) in images">
                    <div><img width="100" height="100"
                              style="margin-left: 40px;" :src="image">
                        <el-form :inline="true">
                            <el-button size="mini" style="margin-left: 55px;" type="text"
                                       @click="moveFormVisible = true;moveIndex = index">移动
                            </el-button>
                            <el-button size="mini" type="text" @click="dele(index)">删除</el-button>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>

    <div class="add-form">
        <!--弹出窗口-->
        <el-dialog title="添加图片" :visible.sync="formVisible">
            <el-form label-width="100px">
                <el-form-item prop="pojo.imageItems" label="选择图片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/oss.do?folder=album/albumId"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save()">保存</el-button>
                    <el-button @click="formVisible = false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

    <div class="move-form">
        <!--弹出窗口-->
        <el-dialog title="移动相册" :visible.sync="moveFormVisible">
            <el-form label-width="100px">
                <el-input v-model="movePojo.image=images[moveIndex]" type="hidden"></el-input>
                <el-select v-model="movePojo.addId" filterable placeholder="请选择">
                    <el-option
                            v-for="item in albumList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-form-item>
                    <el-button type="primary" @click="move()">保存</el-button>
                    <el-button @click="moveFormVisible = false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>


</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                albumId: null,
                images: [],
                moveFormVisible: false,
                albumList: {},
                moveIndex: 0,
                movePojo: {}
            }
        },
        created() {
            this.albumId = getQueryString('id');
            this.fetchData();
            axios.get("/album/findAll.do").then(res => {
                if (res.data != null) {
                    this.albumList = res.data;
                }
            })
        },
        methods: {
            fetchData() {
                axios.get("/album/findById.do?id=" + this.albumId).then(res => {
                    if (res.status == 200) {
                        this.pojo.id = res.data.id;
                        this.pojo.image = res.data.image;
                        this.pojo.imageItems = res.data.imageItems;
                        this.pojo.title = res.data.title;
                    }
                    this.images = this.pojo.imageItems.split(",");
                });
            },
            save() {
                if (this.imageUrl == '') {
                    this.$alert("不能提交空表单!")
                    return;
                }
                this.pojo.id = this.albumId;
                this.images.push(this.imageUrl);
                this.pojo.imageItems = this.images.toString(); //如页面有图片上传功能放开注释
                axios.post(`/album/${this.pojo.id == null ? 'add' : 'update'}.do`, this.pojo).then(response => {
                    this.fetchData(); //刷新列表
                    this.formVisible = false;//关闭窗口
                });
            },
            dele(index) {
                //删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)
                this.$confirm('确定要删除此照片吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.images.splice(index, 1);
                    this.pojo.imageItems = this.images.toString();
                    axios.post(`/album/update.do`, this.pojo).then(response => {
                        this.fetchData(); //刷新列表
                    });
                })
            },
            // ****图片上传相关代码  如页面有图片上传功能放开注释 ****
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            move() {
                if (this.movePojo.addId == undefined) {
                    this.$alert("请选择相册!")
                    return;
                }
                //再给当前相册删除
                let deleteItem;
                this.movePojo.deleteId = this.albumId;
                this.images.splice(this.moveIndex, 1);
                deleteItem = this.images.toString();
                let deleteAlbum = {
                    id: this.movePojo.deleteId,
                    imageItems: deleteItem
                };
                axios.post(`/album/update.do`, deleteAlbum).then(response => {
                });
                //先给要移动到的相册加上
                let moveImage = this.movePojo.image;
                axios.get("/album/findById.do?id=" + this.movePojo.addId).then(res => {
                    let addAlbum = {
                        id: this.movePojo.addId + "",
                        imageItems: res.data.imageItems + ',' + moveImage
                    };
                    if (res.data != null) {
                        axios.post(`/album/update.do`, addAlbum).then(response => {
                        });
                    }
                });
                this.moveFormVisible = false
            }
        }
    })
</script>
</html>
